﻿<template>
    <div class="appmain">
        <div class="apptitle">
            <div class="lefttitle">
                <img class="titleicon" src="img/ic_task.png" />
                <div style="width:40px"></div>
                <div style="color: antiquewhite;font-size: 20px;line-height: 18px;font-weight: 600;">{{ title }}</div>
            </div>
            <div class="tabheader">
                <TitleTabItem v-for="tab in tabs" :key="tab.val" :iconsrc="tab.img" :selected="selectedtab == tab.val"
                    @click="changeTab(tab)"></TitleTabItem>

            </div>
            <div class="closebutton roundbutton" @click="closePanel"></div>
        </div>
        <div class="taskarea" v-if="!isEmpty">
            <div class="tasklist">
                <div class="taskmain" style="display:flex;flex-direction: column;width: 100%;">
                    <TaskListEntry img="/img/ic_tab_level1.png" title="主线任务"
                        v-if="(selectedtab == 0 || selectedtab == 1) && tasks.showLevel1"
                        :showdivider="selectedtab == 0 && tasks.showLevel1Divider">

                        <TaskListItem v-for="task in tasks.level1Task" :key="task._id" :title="task.Title"
                            :subtitle="task.Location" :selected="selectedTask != null && selectedTask._id == task._id"
                            @click="onTaskClick(task)"></TaskListItem>
                    </TaskListEntry>

                    <TaskListEntry img="/img/ic_tab_level2.png" title="传说任务"
                        v-if="(selectedtab == 0 || selectedtab == 2) && tasks.showLevel2"
                        :showdivider="selectedtab == 0 && tasks.showLevel2Divider">

                        <TaskListItem v-for="task in tasks.level2Task" :key="task._id" :title="task.Title"
                            :subtitle="task.Location" :selected="selectedTask != null && selectedTask._id == task._id"
                            @click="onTaskClick(task)"></TaskListItem>
                    </TaskListEntry>

                    <TaskListEntry img="/img/ic_tab_level3.png" title="委托任务"
                        v-if="(selectedtab == 0 || selectedtab == 3) && tasks.showLevel3"
                        :showdivider="selectedtab == 0 && tasks.showLevel3Divider">

                        <TaskListItem v-for="task in tasks.level3Task" :key="task._id" :title="task.Title"
                            :subtitle="task.Location" :selected="selectedTask != null && selectedTask._id == task._id"
                            @click="onTaskClick(task)"></TaskListItem>
                    </TaskListEntry>

                    <TaskListEntry img="/img/ic_tab_level4.png" title="世界任务"
                        v-if="(selectedtab == 0 || selectedtab == 4) && tasks.showLevel4" :showdivider="false">

                        <TaskListItem v-for="task in tasks.level4Task" :key="task._id" :title="task.Title"
                            :subtitle="task.Location" :selected="selectedTask != null && selectedTask._id == task._id"
                            @click="onTaskClick(task)"></TaskListItem>
                    </TaskListEntry>

                    <TaskListEntry img="/img/ic_done.png" title="已完成" v-if="(selectedtab == 5) && tasks.showDone"
                        :showdivider="false">

                        <TaskListItem v-for="task in tasks.completedTask" :key="task._id" :title="task.Title"
                            :subtitle="task.Location" :selected="selectedTask != null && selectedTask._id == task._id"
                            @click="onTaskClick(task)"></TaskListItem>
                    </TaskListEntry>
                </div>

            </div>
            <div class="taskdetail">
                <TaskDetailView :task="selectedTask" v-if="selectedTask != null" @reqedit="editTask"
                    @reopen="reopenTask" @delete="delTask" @totop="topTask" @editStateChanged="editStateChanged"
                    @changed="updateDetailContent"></TaskDetailView>
            </div>
        </div>
        <div class="taskarea" v-if="isEmpty">
            <div class="empty" v-if="selectedtab != 5">
                <div class="empty1">暂无进行中的任务</div>
                <div class="empty2" v-if="selectedtab == 0">去添加一个任务吧</div>
                <div class="empty2" v-else>去别的地方看看吧</div>
            </div>
            <div class="empty" v-else>
                <div class="empty1">暂无已完成的任务</div>
                <div class="empty2">去完成一个任务吧</div>
            </div>
        </div>
        <div class="appbottom">

            <div class="borderhr"></div>
            <div class="bottomfunc">
                <div class="roundbutton" @click="showDone">
                    <div class="donebutton" />
                </div>
                <div style="width:30px"></div>
                <GenshinButton title="添加任务" img="/img/ic_tab_level2.png" width="239px" @click="addTask">
                </GenshinButton>
                <div style="flex-grow:1"></div>
                <GenshinButton v-if="!isEmpty && selectedTask != null && selectedTask.IsCompleted == false"
                    @click="completeTask" title="完成任务" img="/img/ic_tab_done.png" width="239px"></GenshinButton>

                <div style="width:60px"></div>

            </div>
        </div>

        <b-modal v-model="showeditdialog" has-modal-card trap-focus :destroy-on-hide="true" animation="zoom-in"
            :can-cancel="false" aria-modal>
            <template #default>
                <EditTaskDialog @close="showeditdialog = false" :initialtask="cachedTask" @done="onEditDialogClose">
                </EditTaskDialog>
            </template>
        </b-modal>

        <b-modal v-model="confirm.show" has-modal-card trap-focus :destroy-on-hide="true" animation="zoom-in"
            :can-cancel="false" aria-modal>
            <template #default>
                <ConfirmDialog @close="confirm.show = false" @done="confirmDialogDone" :title="confirm.title"
                    :message="confirm.message">
                </ConfirmDialog>
            </template>
        </b-modal>

    </div>
</template>
<script>
import TaskListItem from './components/TaskListItem.vue';
import TaskListEntry from './components/TaskListEntry.vue';
import TitleTabItem from './components/TitleTabItem.vue';
import GenshinButton from './components/GenshinButton.vue';
import EditTaskDialog from './views/EditTaskDialog.vue';
import TaskDetailView from './views/TaskDetailView.vue';

import ConfirmDialog from './views/ConfirmDialog.vue';

export default {
    name: "AppMain",
    components: { TaskListItem, TitleTabItem, GenshinButton, TaskListEntry, EditTaskDialog, TaskDetailView, ConfirmDialog },
    data() {
        return {
            title: "进行中",
            selectedtab: 0,
            showeditdialog: false,
            tabs: [
                {
                    img: "/img/ic_tab_all.png",
                    val: 0,
                    title: "进行中",
                },
                {
                    img: "/img/ic_tab_level1.png",
                    val: 1,
                    title: "主线任务",
                },
                {
                    img: "/img/ic_tab_level2.png",
                    val: 2,
                    title: "传说任务",
                },
                {
                    img: "/img/ic_tab_level3.png",
                    val: 3,
                    title: "委托任务",
                },
                {
                    img: "/img/ic_tab_level4.png",
                    val: 4,
                    title: "世界任务",
                },

            ],
            tasks: {
                level1Task: [],
                level2Task: [],
                level3Task: [],
                level4Task: [],
                completedTask: [],
                showLevel1: true,
                showLevel2: true,
                showLevel3: false,
                showLevel4: false,
                showDone: true,

                showLevel1Divider: false,
                showLevel2Divider: true,
                showLevel3Divider: false,
            },
            selectedTask: null,
            beforeEdit: null,
            isEmpty: false,
            isCreating: false,
            cachedTask: null,

            confirm: {
                show: false,
                title: "是否删除",
                message: "是否删除这个任务？",
                doneAction: null,
            },
            inEditingContent: false,
        };
    },
    methods: {

        changeTab(tab) {
            if (this.checkEditState()) { return; }
            this.selectedtab = tab.val; this.title = tab.title; this.checkEmpty();
        },

        closePanel() {
            window.$.ajax("api/ui/close", null);
        },
        showDone() {
            if (this.checkEditState()) { return; }
            if (this.selectedtab != 5) {

                this.title = "已完成";
                this.selectedtab = 5;
                this.checkEmpty();
            }
            else {
                this.title = "进行中";
                this.selectedtab = 0;
                this.checkEmpty();
            }
        },
        checkEmpty() {
            window._currentType = this.selectedtab;
            if (window._currentType == 5) {
                window._currentType = 0;
            }
            this.tasks.showLevel1 = this.tasks.level1Task.length > 0;
            this.tasks.showLevel2 = this.tasks.level2Task.length > 0;
            this.tasks.showLevel3 = this.tasks.level3Task.length > 0;
            this.tasks.showLevel4 = this.tasks.level4Task.length > 0;
            this.tasks.showDone = this.tasks.completedTask.length > 0;
            if (this.selectedtab == 0) {
                this.isEmpty = !(this.tasks.showLevel1 || this.tasks.showLevel2 || this.tasks.showLevel3 || this.tasks.showLevel4);
                this.tasks.showLevel1Divider = true;
                this.tasks.showLevel2Divider = true;
                this.tasks.showLevel3Divider = true;
                this.tasks.showLevel4Divider = true;
                do {
                    if (this.tasks.showLevel4) {
                        break;
                    }
                    this.tasks.showLevel3Divider = false;
                    if (this.tasks.showLevel3) {
                        break;
                    }
                    this.tasks.showLevel2Divider = false;
                    if (this.tasks.showLevel2) {
                        break;
                    }
                    this.tasks.showLevel1Divider = false;
                } while (false);

            }
            else {

                if (this.selectedtab == 1) { this.isEmpty = !this.tasks.showLevel1; }
                if (this.selectedtab == 2) { this.isEmpty = !this.tasks.showLevel2; }
                if (this.selectedtab == 3) { this.isEmpty = !this.tasks.showLevel3; }
                if (this.selectedtab == 4) { this.isEmpty = !this.tasks.showLevel4; }
                if (this.selectedtab == 5) { this.isEmpty = !this.tasks.showDone; }
            }

            // find first task and display

            if (this.isEmpty) { return; }
            var findAll = this.selectedtab == 0;
            var findIn = (target, _findAll) => {
                if (target.length > 0) {
                    this.selectedTask = target[0];
                    return true;
                }
                return !_findAll;
            };
            switch (this.selectedtab) {
                case 0:
                case 1: if (findIn(this.tasks.level1Task, findAll)) break;
                case 2: if (findIn(this.tasks.level2Task, findAll)) break;
                case 3: if (findIn(this.tasks.level3Task, findAll)) break;
                case 4: if (findIn(this.tasks.level4Task, findAll)) break;
                case 5: if (findIn(this.tasks.completedTask, findAll)) break;
            }
        },

        onEditDialogClose(newobj) {
            if (this.isCreating) {
                window.$.postJson("/api/todo/add", newobj).then(suc => {
                    this.showeditdialog = false;
                    this.loadData();
                }).catch(err => {
                    this.$buefy.toast.open({
                        duration: 5000,
                        message: `添加失败` + err,
                        position: 'is-top',
                        type: 'is-danger'
                    })
                });
            }
            else {
                window.$.postJson("/api/todo/edit", newobj).then(suc => {
                    this.showeditdialog = false;
                    this.$buefy.toast.open('任务已更新');
                    this.selectedTask = newobj;

                    this.loadData();

                }).catch(err => {
                    this.$buefy.toast.open({
                        duration: 5000,
                        message: `保存失败` + err,
                        position: 'is-top',
                        type: 'is-danger'
                    })
                });
            }
        },
        addTask() {

            if (this.checkEditState()) { return; }
            this.cachedTask = null; this.isCreating = true; this.showeditdialog = true
        },

        editTask() {
            if (this.checkEditState()) { return; }
            this.isCreating = false;
            this.cachedTask = window.$.cloneObject(this.selectedTask);
            if (this.cachedTask.EndDate != null) {
                this.cachedTask.EndDate = new Date(this.cachedTask.EndDate);
            }
            this.showeditdialog = true;
        },
        topTask() {
            if (this.checkEditState()) { return; }
            this.selectedTask.ModifiedDate = new Date();
            window.$.postJson("/api/todo/edit", this.selectedTask).then(suc => {
                this.$buefy.toast.open('任务已置顶');
                this.loadData();
            }).catch(err => {
                this.$buefy.toast.open({
                    duration: 5000,
                    message: `保存失败` + err,
                    position: 'is-top',
                    type: 'is-danger'
                })
            });
        },

        delTask() {
            if (this.checkEditState()) { return; }
            this.confirm.title = "是否删除";
            this.confirm.message = "是否删除此任务？";
            this.confirm.doneAction = (() => {
                window.$.postJson("/api/todo/delete", this.selectedTask).then(suc => {
                    this.confirm.show = false;
                    this.$buefy.toast.open('任务已删除');
                    this.loadData();
                }).catch(err => {
                    this.$buefy.toast.open({
                        duration: 5000,
                        message: `删除失败` + err,
                        position: 'is-top',
                        type: 'is-danger'
                    })
                });
            });
            this.confirm.show = true;
        },
        reopenTask() {
            if (this.checkEditState()) { return; }
            this.confirm.title = "重新启用任务";
            this.confirm.message = "是否重新启用此任务？";
            this.confirm.doneAction = (() => {
                this.selectedTask.IsCompleted = false;
                window.$.postJson("/api/todo/edit", this.selectedTask).then(suc => {
                    this.showeditdialog = false;
                    this.$buefy.toast.open('内容已保存');
                    this.selectedtab = 0;
                    this.loadData();
                }).catch(err => {
                    this.$buefy.toast.open({
                        duration: 5000,
                        message: `保存失败` + err,
                        position: 'is-top',
                        type: 'is-danger'
                    })
                });

               
            });
            this.confirm.show = true;
        },

        updateDetailContent(newtask) {
            window.$.postJson("/api/todo/edit", newtask).then(suc => {
                this.showeditdialog = false;
                this.$buefy.toast.open('内容已保存')
            }).catch(err => {
                this.$buefy.toast.open({
                    duration: 5000,
                    message: `保存失败` + err,
                    position: 'is-top',
                    type: 'is-danger'
                })
            });
        },

        confirmDialogDone() {
            if (this.confirm.doneAction != null) {
                this.confirm.doneAction();
                this.confirm.show = false;
            }
        },

        loadData() {
            window.$.ajax("/api/todo/all", {}).then(result => {
                var taskList = JSON.parse(result);
                this.tasks.level1Task = [];
                this.tasks.level2Task = [];
                this.tasks.level3Task = [];
                this.tasks.level4Task = [];
                this.tasks.completedTask = [];
                taskList.forEach(element => {

                    if (element.EndDate != null) {
                        element.EndDate = new Date(element.EndDate);
                    }


                    if (element.IsCompleted) {
                        this.tasks.completedTask.push(element);
                    }
                    else {
                        if (element.TypeLevel == 1) {
                            this.tasks.level1Task.push(element);
                        }
                        if (element.TypeLevel == 2) {
                            this.tasks.level2Task.push(element);
                        }
                        if (element.TypeLevel == 3) {
                            this.tasks.level3Task.push(element);
                        }
                        if (element.TypeLevel == 4) {
                            this.tasks.level4Task.push(element);
                        }
                    }
                });
                this.checkEmpty();
            }).catch(err => {
                this.$buefy.toast.open({
                    duration: 5000,
                    message: `无法获取数据：` + err,
                    position: 'is-top',
                    type: 'is-danger'
                });
            });
        },

        onTaskClick(task) {
            if (this.checkEditState()) { return; }
            this.selectedTask = task;
        },

        completeTask() {
            if (this.checkEditState()) { return; }

            this.confirm.title = "是否完成";
            this.confirm.message = "是否确认完成此任务？";

            this.confirm.doneAction = (() => {
                window.$.postJson("/api/todo/complete", this.selectedTask).then(suc => {
                    this.confirm.show = false;
                    this.$buefy.toast.open('任务已完成');
                    this.loadData();
                }).catch(err => {
                    this.$buefy.toast.open({
                        duration: 5000,
                        message: `提交失败` + err,
                        position: 'is-top',
                        type: 'is-danger'
                    })
                });
            });
            this.confirm.show = true;
        },

        editStateChanged(newState) {
            this.inEditingContent = newState;
            console.log(newState);
        },

        checkEditState() {
            if (this.inEditingContent) {

                this.$buefy.toast.open('请先完成编辑');
                return true;
            }
            return false;
        },


    },
    mounted() {
        this.checkEmpty();
        this.loadData();
    },
};
</script>

<style scoped>
.appmain {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.apptitle {
    width: 100%;
    height: 80px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.267);
    flex-shrink: 0;
}

.taskarea {
    width: 100%;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    padding-left: 100px;
    padding-right: 80px;
}

.appbottom {
    width: 100%;
    height: 100px;
    flex-shrink: 0;
}

.tasklist {
    margin-top: 12px;
    width: 600px;
    height: calc(100% - 24px);
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    flex-shrink: 0;
}

.taskdetail {

    flex-grow: 1;
    height: 100%;
    overflow-y: none;
    overflow-x: none;
}

.lefttitle {
    position: absolute;
    left: 42px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lefttitle img {
    width: 40px;
    height: 40px;
    filter: hue-rotate(195deg) saturate(0.7) brightness(1.4);

}

.tabheader {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.closebutton {
    top: calc(50% - 25px);
    right: 40px;
    position: absolute;

    background-image: url(img/img_close_button.png);
}



.borderhr {
    border-image: url(img/hr_big_border.png) 45 113;
    width: calc(100% - 48px);
    height: 12px;
    border-image-width: 14px 35px 0px 35px;
    border-top: 14px;
    margin-left: 24px;
    margin-right: 24px;
    border-image-outset: 2px 0px;
    opacity: 0.5;
}

.bottomfunc {
    height: 50px;
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 1px;
    display: flex;
    flex-direction: row;
}

.donebutton {
    width: 40px;
    height: 40px;
    background-color: rgb(58, 65, 84);
    -webkit-mask-image: url(img/ic_done.png);
    -webkit-mask-size: 70% 70%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(img/ic_done.png);
    mask-size: 70% 70%;
    mask-position: center center;
    mask-repeat: no-repeat;
}

.empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
    text-shadow: 0px 0px 2px 2px black;
}

.empty1 {
    font-size: 47px;
    padding-bottom: 23px;
    font-weight: bold;
    color: rgb(236, 228, 217);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.404);
}

.empty2 {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 25px;
    color: rgb(204, 196, 186);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.404);
}
</style>